<template>
  <div>
    <div>
      <Form :model="modelForm" ref="editForm" :rules="rule" :label-width="90">
        <Row :gutter="20">
          <Col span="12">
            <!-- 用户账号 -->
            <Form-item prop="id" :label="$t('module.userManage.account')">
              <Input
                :disabled="!!userInfo.id"
                v-model="modelForm.id"
                :placeholder="$t('common.warning.input') + $t('module.userManage.account')"
                size="small"
                :maxlength="50"
              />
            </Form-item>
          </Col>
          <Col span="12">
            <!-- 用户名称 必填-->
            <Form-item prop="name" :label="$t('module.userManage.name')">
              <Input
                v-model="modelForm.name"
                :placeholder="$t('common.warning.input') + $t('module.userManage.name')"
                size="small"
                :maxlength="30"
              />
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20">
          <Col span="12">
            <!-- 手机号码 -->
            <Form-item prop="mobile" :label="$t('module.userManage.phoneNumber')">
              <Input
                v-model="modelForm.mobile"
                :placeholder="$t('common.warning.input') + $t('module.userManage.phoneNumber')"
                size="small"
              />
            </Form-item>
          </Col>
          <Col span="12">
            <!-- 电子邮箱 -->
            <Form-item prop="email" :label="$t('module.userManage.email')">
              <Input
                v-model="modelForm.email"
                :placeholder="$t('common.warning.input') + $t('module.userManage.email')"
                size="small"
                :maxlength="80"
              />
            </Form-item>
          </Col>
        </Row>
      </Form>
    </div>
  </div>
</template>

<script>
import locales from "./locales.js";
import userManageAPI from "@/api/userManageApi";

// 用于判断登录用户类型
const RIPPLES = "ripples";

export default {
  components: {},
  mixins: [locales],
  props: {
    userInfo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      modelForm: {
        id: "",
        name: "",
        email: "",
        mobile: "",
        deleted: "",
      },
      rule: {},
      actions: [
        {
          text: this.$t("common.save"),
          theme: "primary",
          handle: () => {
            this.save();
          },
          loading: false
        },
        {
          text: this.$t("common.close"),
          theme: "primary",
          handle: () => {
            this.$emit("Close");
          }
        }
      ]
    };
  },
  computed: {},
  created: function() {
    if (this.userInfo.id) {
      // 编辑
      this.$emit("SetTitle", this.$t("module.userManage.editUser"));
      this.modelForm = Object.assign(this.modelForm, this.userInfo)
    } else {
      // 新增
      this.$emit("SetTitle", this.$t("module.userManage.addUser"));
    }
    this.$emit("SetPageWidth", 736);
    this.$emit('SetPageMinHeight', 260);
    this.$emit("SetPageActions", this.actions);
  },
  methods: {
    save() {
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          this.actions[0].loading = true;
          if (this.userInfo.id) {
            userManageAPI
            .updateUser(this.modelForm)
            .then(response => {
              this.$message.success({
                content: this.$t("common.updateSuccess"),
                duration: 3
              });
              this.$emit("Close", true);
            })
            .catch(() => {
              this.actions[0].loading = false;
            });
          } else {
            // 新增用户
            let params = this.modelForm;
            userManageAPI
              .addUser(params)
              .then(response => {
                this.$message.success({
                  content: this.$t("common.warning.saveSuccess"),
                  duration: 3
                });
                this.$emit("Close", true);
              })
              .catch(() => {
                this.actions[0].loading = false;
              });
          }
        } else {
          this.$message.error({
            content: this.$t("common.warning.updateSuccess"),
            duration: 3
          });
        }
      });
    }
  },
  watch: {},
};
</script>
<style lang="less"></style>
